<template>
  <div>
    <el-container id="main">
      <img src="../../assets/mainImg/headlogo.png" class="imglogo" alt="" />
      <!-- 头部 -->
      <el-header class="mainHeader">
        <span>
          <el-avatar :src="imgHead"></el-avatar>
          <div class="avatarText" title="退出" @click="open">退出EXIT</div>
        </span>
      </el-header>
      <!-- 中部菜单 -->
      <el-container>
        <el-aside class="aside">
          <!-- 主页1 -->
          <el-menu default-active="1" :unique-opened="true" router>
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-s-home"></i>BOSS主页
              </template>
              <el-menu-item index="/main/indexTw">
                <i class="el-icon-eleme"></i>
                打字机文字
              </el-menu-item>

              <el-menu-item index="/main/indexPi">
                <i class="el-icon-user"></i>
                修改个人信息
              </el-menu-item>

              <el-menu-item index="/main/indexSay">
                <i class="el-icon-s-opportunity"></i>
                名言警句
              </el-menu-item>
              <!-- 主页1近期日记 -->
              <el-submenu index="1-4">
                <template slot="title">
                  <i class="el-icon-notebook-1"></i>我的日记
                </template>

                <el-menu-item index="/main/indexMyStory">
                  <i class="el-icon-star-off"></i>
                  日记回忆史
                </el-menu-item>

                <el-menu-item index="/main/MyStoryImportant">
                  <i class="el-icon-star-on"></i>
                  重要日记
                </el-menu-item>
              </el-submenu>
            </el-submenu>
          </el-menu>
          <!-- 主页2 -->
          <el-menu default-active="1" :unique-opened="true" router>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-thumb"></i>荣勋技能主页
              </template>
              <el-menu-item index="/main/index2Teacher">
                <i class="el-icon-s-custom"></i>
                我的尊师
              </el-menu-item>
              <el-menu-item index="/main/index2Item">
                <i class="el-icon-s-platform"></i>
                项目
              </el-menu-item>
              <el-menu-item index="/main/index2Hp">
                <i class="el-icon-trophy"></i>
                我的奖项
              </el-menu-item>
              <el-menu-item index="/main/index2Secret">
                <i class="el-icon-view"></i>
                我的秘密
              </el-menu-item>
            </el-submenu>
          </el-menu>
          <!-- 主页3 -->
          <el-menu default-active="1" :unique-opened="true" router>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-video-camera-solid"></i>回忆故事主页
              </template>
              <el-submenu index="1-4">
                <template slot="title">
                  <i class="el-icon-school"></i>教育经历
                </template>
                <el-menu-item index="/main/index3EduExp">
                  <i class="el-icon-star-on"></i>
                  经历列表
                </el-menu-item>
                <el-menu-item index="/main/eduPrim">
                  <i class="el-icon-star-on"></i>
                  经历内容
                </el-menu-item>
              </el-submenu>
              <el-menu-item index="/main/index3WorkExp">
                <i class="el-icon-office-building"></i>
                工作经历
              </el-menu-item>
              <el-menu-item index="/main/index3Mind">
                <i class="el-icon-chat-line-round"></i>
                私人名言
              </el-menu-item>
              <el-menu-item index="/main/index3Dream">
                <i class="el-icon-s-flag"></i>
                我的梦想
              </el-menu-item>
            </el-submenu>
          </el-menu>
          <!-- 测试页面 -->
          <el-menu default-active="4" :unique-opened="true" router>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-setting"></i>备流页面
              </template>
              <el-menu-item index="/main/ces">
                <i class="el-icon-star-on"></i>
                测试
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 剩下交给路由即可 -->
        <el-main class="mainCon">
          <router-view />
        </el-main>
      </el-container>
      <!-- 底部 -->
      <el-footer>
        Copyright © 2023.Godz 为梦想而战斗
        <div class="webMark">网站备案号:皖ICP备2020020832号</div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 头像(网上找的)
      imgHead:
        "https://ss0.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2896953336,1574286449&fm=26&gp=0.jpg",
    };
  },
  created() {
    let pass = sessionStorage.getItem("pass");
    console.log("进入main页面后,登录变量为:" + pass); //防止出BUG,留着打印
    // 判断是否有登录权限
    if (pass == "false" || pass == null) {
      alert("请登录");
      this.$router.push("/");
    }
  },
  methods: {
    // 退出按钮
    open() {
      this.$confirm("退出用户将需要重新输出密码,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // localStorage.removeItem('pass');//如果是用localStorage超长期存变量,移除就用这个
          sessionStorage.setItem("pass", false); //设置会话
          this.$router.push("/");
          this.$message({
            type: "success",
            message: "退出成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消退出",
          });
        });
    },
  },
};
</script>

<style scoped lang="less">
#main {
  .imglogo {
    position: absolute;
    width: 150px;
    margin-top: 10px;
    margin-left: 50px;
    z-index: 3;
  }
  .mainHeader {
    background-color: #0078ff;
    position: fixed;
    width: 100%;
    text-align: right;
    z-index: 2;
    span {
      color: white;
      span {
        margin-top: 1%;
      }
      .avatarText {
        display: inline-block;
        cursor: pointer;
        &:hover {
          color: red;
        }
      }
    }
  }
  .aside {
    width: 15% !important;
    height: 84% !important;
    position: fixed;
    top: 60px;
  }
  .mainCon {
    position: fixed;
    top: 50px;
    width: 85%;
    height: 84%;
    left: 15%;
  }
  .el-footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    background-color: #0078ff;
    color: white;
    text-align: center;
    line-height: 30px;
    z-index: 9;
    .webMark {
      color: black;
      font-weight: bold;
    }
  }
}
</style>